<template>
  <div class="left">
    <div class="left1">
      <div class="shang1">
        <div class="jie">
          <h2 class="jianjie">项目简介</h2>
        </div>
        <div class="wenzi">
          <p class="wz">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本系统由北斗卫星监测站，全方位数据采集仪，四维远见监测云平台组成，采用先进的传感器技术和人工智能算法，可自动测量，自动处理，实时监测，秒级预警。
          </p>
          <p class="wz">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本系统能够实时监测管网运行状态，收集并分析数据，为城市排水管理提供科学依据。智慧监测不仅提高了排水效率，降低了能耗和成本，还能预测潜在问题，及时采取应对措施，确保城市排水安全、环保和资源高效利用。
          </p>
        </div>
      </div>
    </div>

    <div class="left2">
      <div class="z1i"><span class="zi1">设备状态</span></div>
      <div class="tubiao1" ref="barChart"></div>
    </div>
  </div>
  <div class="right">
    <div class="right0">
      <div class="weatherTou">今日天气</div>
      <div class="weatherDay">{{ currentDate }}&nbsp;&nbsp;&nbsp;&nbsp;{{ weekday }}</div>
      <div class="weatherTime"><code class="digital-font">{{ currentTime }}</code></div>
      <div class="weatherCity">
        <span class="weatherCity1">郑州市{{ listCity[0].city }}</span>
        <span class="weatherCity2">温度: {{ listCity[0].wendu }}°C</span>
        <span class="weatherCity3">天气状况: {{ listCity[0].tianqi }}</span>
        <span class="weatherCity4">风向: {{ listCity[0].fengxiang }}风{{ listCity[0].fengsu }}级</span>
      </div>
    </div>
    <div class="right1">
      <div class="h1shuju">
        <h1 class="shujuh1">数据采集</h1>
      </div>
      <div class="zytb">
        <div class="thead">
          <div class="tr">
            <div class="th" style="width: 10%;">编号</div>
            <div class="th" style="width: 25%;">传感器名称</div>
            <div class="th" style="width: 15%;">当前值</div>
            <div class="th" style="width: 10%;">单位</div>
            <div class="th" style="width: 25%;">采集时间</div>
            <div class="th" style="width: 15%;">状态</div>
          </div>
        </div>
        <div class="tbody">
          <div v-for="(item, index) in list" :key="item.id" class="tr">
            <div class="td" style="width: 10%;">{{ index + 1 }}</div>
            <div class="td" style="width: 25%;">{{ item.name }}</div>
            <div class="td" style="width: 15%;">{{ item.zhi }}</div>
            <div class="td" style="width: 10%;">{{ item.danwei }}</div>
            <div class="td" style="width: 25%;">{{ item.time }}</div>
            <div class="td" style="width: 15%;">{{ item.zhuangtai }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="right3">
      <div class="z4i"><span class="zi4">今日预警统计</span></div>
      <div class="tubiao4" ref="barChart4"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watchEffect, computed, onUnmounted } from "vue"
import { getData } from "../utils/api"
import { getCity } from "../utils/apiCity"
import * as echarts from "echarts"
import { useApiStore } from "../stores/user"
// 时间、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
const currentDate = ref(new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }));
const currentTime = ref(new Date().toLocaleTimeString());
const weekday = ref(new Date().toLocaleString('default', { weekday: 'long' }));

const updateTime = () => {
  currentDate.value = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
  currentTime.value = new Date().toLocaleTimeString();
  weekday.value = new Date().toLocaleString('default', { weekday: 'long' });
};
let intervalId3;
onMounted(() => {
  updateTime()
  intervalId3 = setInterval(updateTime, 1000);// 每秒更新一次时间和日期
});

onUnmounted(() => {
  if (intervalId3) {
    clearInterval(intervalId3); // 在组件卸载时清除定时器  
  }// 组件卸载时清除定时器
});
// 天气、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
let listCity = ref([])
const fetchCity = async () => {
  let res2 = await getCity()
  listCity.value = [{
    city: res2.lives[0].city,
    wendu: res2.lives[0].temperature,
    tianqi: res2.lives[0].weather,
    fengxiang: res2.lives[0].winddirection,
    fengsu: res2.lives[0].windpower
  }
  ]
  return { listCity }
};

// 传感器数据、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
let res = useApiStore()
let list = ref([])
const fetchData = async () => {
  let res1 = await getData()
  res.setData(res1.Data)
  let ddd = res.data
  list.value = [{
    name: "雨量计",
    id: 1,
    zhi: ddd[0].sRealTimeValue,
    danwei: "mm",
    time: ddd[0].sTime,
    zhuangtai: "采集中"
  },
  {
    name: "管道湿度",
    id: 2,
    zhi: ddd[1].sRealTimeValue,
    danwei: "%",
    time: ddd[1].sTime,
    zhuangtai: "采集中"
  },
  // {
  //   name: "土壤温度",
  //   id: 3,
  //   zhi: ddd[2].sRealTimeValue,
  //   danwei: "°C",
  //   time: ddd[2].sTime,
  //   zhuangtai: "采集中"
  // },
  {
    name: "振弦频率",
    id: 4,
    zhi: ddd[4].sRealTimeValue,
    danwei: "hz",
    time: ddd[4].sTime,
    zhuangtai: "采集中"
  },
  {
    // name: "振弦温度",
    name: "污水温度",
    id: 5,
    zhi: ddd[5].sRealTimeValue,
    danwei: "°C",
    time: ddd[5].sTime,
    zhuangtai: "采集中"
  }
  ]
  return { list }
};
// 在组件挂载时开始定时器
let intervalId;
let intervalId2;
onMounted(async () => {
  await fetchCity(); // 初始获取数据并初始化 list
  intervalId2 = setInterval(fetchCity, 10800000); // 每3小时执行一次
  await fetchData(); // 初始获取数据并初始化 list
  intervalId = setInterval(fetchData, 10000); // 每10秒执行一次 fetchData
});
// 在组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId); // 在组件卸载时清除定时器
  }
  if (intervalId2) {
    clearInterval(intervalId2); // 在组件卸载时清除定时器
  }
});
await fetchCity()


// 图表1大小、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
const barChart = ref(null)
let myChart = null

const initBarChart = () => {
  if (barChart.value) {
    myChart = echarts.init(barChart.value)

    const option = {
      xAxis: {
        type: "category",
        data: ["未上线", "一级预警", "二级预警", "三级预警", "正常", "异常"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [0, 0, 0, 0, 1, 0],
          type: "bar"
        }
      ]
    }

    myChart.setOption(option)
  }
}

const resizeChart = () => {
  if (myChart) {
    // 当容器大小变化时，重新绘制图表
    myChart.resize()
  }
}

onMounted(() => {
  initBarChart()

  // 添加窗口大小变化的事件监听器
  window.addEventListener("resize", resizeChart)
})

onBeforeUnmount(() => {
  if (myChart) {
    // 销毁图表实例
    myChart.dispose()
  }

  // 移除窗口大小变化的事件监听器
  window.removeEventListener("resize", resizeChart)
})
// 图表3大小、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
const barChart3 = ref(null)
let myChart3 = null

const initBarChart3 = () => {
  if (barChart3.value) {
    myChart3 = echarts.init(barChart3.value)

    const option = {
      title: {
        text: "在线信息",
        left: "center",
        textStyle: { color: '#0DEDF1' }
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "在线信息",
          type: "pie",
          radius: "70%",
          data: [
            { value: 3, name: "在线" },
            { value: 2, name: "离线" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }

    myChart3.setOption(option)
  }
}

const resizeChart3 = () => {
  if (myChart3) {
    // 当容器大小变化时，重新绘制图表
    myChart3.resize()
  }
}

onMounted(() => {
  initBarChart3()

  // 添加窗口大小变化的事件监听器
  window.addEventListener("resize", resizeChart3)
})

onBeforeUnmount(() => {
  if (myChart3) {
    // 销毁图表实例
    myChart3.dispose()
  }

  // 移除窗口大小变化的事件监听器
  window.removeEventListener("resize", resizeChart3)
})
// 图表4大小、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
const barChart4 = ref(null)
let myChart4 = null

const initBarChart4 = () => {
  if (barChart4.value) {
    myChart4 = echarts.init(barChart4.value)

    const option = {
      title: {
        text: "预警信息",
        textStyle: { color: '#0DEDF1' },
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "预警信息",
          type: "pie",
          radius: "70%",
          data: [
            { value: 0, name: "二级预警" },
            { value: 0, name: "一级预警" },
            { value: 0, name: "三级预警" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }

    myChart4.setOption(option)
  }
}

const resizeChart4 = () => {
  if (myChart4) {
    // 当容器大小变化时，重新绘制图表
    myChart4.resize()
  }
}

onMounted(() => {
  initBarChart4()

  // 添加窗口大小变化的事件监听器
  window.addEventListener("resize", resizeChart4)
})

onBeforeUnmount(() => {
  if (myChart4) {
    // 销毁图表实例
    myChart4.dispose()
  }

  // 移除窗口大小变化的事件监听器
  window.removeEventListener("resize", resizeChart4)
})
</script>

<style scoped>
@import url('../../../../public/fonts/custom-fonts.css');

.left {
  top: 8.3vh;
  position: absolute;
  left: 0;
  width: 25vw;
  height: 91.5vh;
  background: url(/img/jiemian/bg.jpg);
  opacity: 0.7;
  z-index: 100;
}

.left1 {
  width: 100%;
  height: 66.5%;
  z-index: 100;
  background: url(/img/jiemian/left.png);
  background-repeat: no-repeat;
  background-size: 100% 95%;
}



.shang1 {
  width: 100%;
  height: 45%;
}

.wenzi {
  margin-top: 2%;
  margin-left: 10%;
  height: 47%;
  width: 80%;
  font-size: 1vw;
  color: #FFFFFF;
}

.wz {
  font-size: 1vw;
}

.jie {
  width: 25%;
  height: 10%;
  margin-left: 10%;
}

.jianjie {
  color: #0DEDF1;
  font-size: 1.2vw;
}



.left2 {
  width: 100%;
  height: 29.5%;
  margin-top: 4%;
  z-index: 100;
  background: url(/img/jiemian/right2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.z1i {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
}

.zi1 {
  width: 100%;
  text-align: center;
  color: #0DEDF1;
}

.tubiao1 {
  width: 100%;
  height: 80%;
}

.right {
  right: 0;
  top: 8.3vh;
  position: absolute;
  width: 25vw;
  height: 91.5vh;
  background: url(/img/jiemian/bg.jpg);
  z-index: 100;
  opacity: 0.7;
}

.right0 {
  width: 100%;
  height: 20%;
  background: url(/img/jiemian/right2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.weatherTou {
  width: 100%;
  height: 10%;
  text-align: center;
  font-size: 0.8vw;
  color: #0DEDF1;
}

.weatherDay {
  padding: 5%;
  padding-top: 2%;
  width: 95%;
  height: 20%;
  font-size: 1vw;
  color: #FFFFFF;
}



.weatherTime {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
}

.digital-font {
  width: 42%;
  letter-spacing: 0.5vw;
  font-size: 3vw;
}

.weatherCity {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 18%;
  font-size: 1vw;
  color: #FFFFFF;
}

.weatherCity1 {
  width: 25%;
  text-align: center;
  font-size: 0.8vw;
}

.weatherCity2 {
  width: 20%;
  text-align: center;
  font-size: 0.8vw;
}

.weatherCity3 {
  width: 25%;
  text-align: center;
  font-size: 0.8vw;
}

.weatherCity4 {
  width: 30%;
  text-align: center;
  font-size: 0.8vw;
}

.right1 {
  width: 100%;
  height: 50%;
  z-index: 100;
  background: url(/img/jiemian/right.png);
  background-repeat: no-repeat;
  background-size: 100% 95%;
}

.h1shuju {
  width: 50%;
  height: 15%;
  margin-left: 10%;
}

.shujuh1 {
  color: #0DEDF1;
  font-size: 1.2vw;
}

.zytb {
  width: 80%;
  height: 60%;
  margin-left: 10%;
}

.tr {
  display: flex;
}

.th {
  height: 12.5%;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}

.td {
  height: 12.5%;
  color: #FFFFFF;
  font-size: 0.8vw;
  text-align: center;
}

.right2 {
  margin-left: 10%;
  width: 80%;
  height: 40%;
  z-index: 100;
  background: url(/img/jiemian/right2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.z3i {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
}

.zi3 {
  width: 100%;
  text-align: center;
  color: #0DEDF1;
}

.tubiao3 {
  width: 100%;
  height: 80%;
}

.right3 {
  width: 100%;
  height: 30%;
  z-index: 100;
  background: url(/img/jiemian/right2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.z4i {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
}

.zi4 {
  width: 100%;
  text-align: center;
  color: #0DEDF1;
}

.tubiao4 {
  width: 100%;
  height: 80%;
}
</style>
